<template>
  <div class="top cb">
    <slot></slot>
    <el-radio-group
        v-model="radioValue"
        @change="radioChange"
        style="margin-right: 20px;"
        size="small"
    >
      <el-radio-button
          :label="time.value"
          v-for="time in timeRadioValues || defaultTimes"
          :disabled="disableRadio(timeRadioValues || defaultTimes, time.value)"
          :key="time.value"
      >
        {{time.label}}
      </el-radio-button>
      <el-radio-button label="0">自定义</el-radio-button>
    </el-radio-group>
    <el-date-picker
        v-model="datePickerContent"
        :type="format=='YYYY-MM-DD'?'daterange':'datetimerange'"
        :default-time="['00:00:00', '23:59:59']"
        :value-format="format=='YYYY-MM-DD'?'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        v-show="datePickerIsShow"
        v-bind="$attrs"
        v-on="inputListeners"
        style="margin-right: 20px"
        size="small"
    ></el-date-picker>
    <TimeLine :startDate="datePickerContent&&datePickerContent[0]" :endDate="datePickerContent&&datePickerContent[1]"></TimeLine>
  </div>
</template>

<script>
import { getTimeRangeByUnit, formatTime } from "@/utils/time.js";
import TimeLine from './TimeLine.vue'
export default {
  model: {
    prop: "selectDate",
    event: "change",
  },
  components:{TimeLine},
  props: {
    selectDate:{
      type: Array,
      default:function(){
        return []
      }
    },
    timeRadioValues: {
      type: Array
    },
    disableRadio: {
      type: Function,
      default:function(timeRadioValues,radioValue){
        return false;
      }
    },
    defaultTimeRadioValue: {},
    dateArr:{},
    format: {
      default:'YYYY-MM-DD HH:mm:ss'
    },
  },
  watch:{
    selectDate:{
      handler(){
        this.datePickerContent = this.selectDate
      },
      deep:true,
      immediate:true
    },
    defaultTimeRadioValue(){
      this.resolveRadioValue()
    }
  },
  data() {
    return {
      radioValue: "1h",
      datePickerContent:[],
      datePickerIsShow: false,
      startDate: "",
      endDate: "",
      defaultTimes: [
        {label:"今天",value:"0d"},
        {label:"近3天",value:"2d"},
        {label:"近1周",value:"6d"},
        {label:"近1月",value:"1m"},
        {label:"近3月",value:"3m"},
      ],
    };
  },
  created() {
    this.resolveRadioValue()
    this.radioChange(this.radioValue);
  },
  computed: {
    inputListeners: function () {
      var vm = this;
      return Object.assign(
          {},
          this.$listeners,
          {
            change(value) {
              if(!value){
                return false;
              }
              vm.startDate = value && value[0];
              vm.endDate = value && value[1];
              value.radioValue = vm.radioValue
              vm.$emit("change", value);
            },
          }
      );
    }
  },
  methods: {
    resolveRadioValue(){
      let timeValues = (this.timeRadioValues || this.defaultTimes).map(item=>item.value);
      if(timeValues.includes(this.defaultTimeRadioValue))
        this.radioValue = this.defaultTimeRadioValue
      else{
        this.radioValue = '0'
        this.datePickerIsShow = true
      }
    },
    // 时间切换选择
    radioChange(value) {
      let data = {
        '1h': getTimeRangeByUnit(1, "hour"),
        '6h': getTimeRangeByUnit(6, "hour"),
        '12h': getTimeRangeByUnit(12, "hour"),
        '0d': getTimeRangeByUnit(0, "day"),
        '2d': getTimeRangeByUnit(2, "day"),
        '6d': getTimeRangeByUnit(6, "day"),
        '1m': getTimeRangeByUnit(29, "day"),
        '3m': getTimeRangeByUnit(59, "day"),
      };
      let dateArr = [];
      if (value == 0) {
        //自定义跟地址栏传参
        if (this.$route.query.startDate && this.$route.query.endDate) {
          dateArr = [this.$route.query.startDate, this.$route.query.endDate];
        } else {
          dateArr = this.dateArr||[
            formatTime(new Date(), this.format==='YYYY-MM-DD'?'YYYY-MM-DD':"YYYY-MM-DD 00:00:00"),
            formatTime(new Date(), this.format)
          ];
        }
        this.datePickerIsShow = true;
      } else {
        this.datePickerIsShow = false;
        if (value == "0d") {
          dateArr = [
            formatTime(new Date(), this.format==='YYYY-MM-DD'?'YYYY-MM-DD':"YYYY-MM-DD 00:00:00"),
            formatTime(new Date(), this.format)
          ];
        } else{
          dateArr = [
            formatTime(data[value][0], this.format),
            formatTime(new Date(), this.format)
          ];
        }
      }
      this.startDate = dateArr && dateArr[0];
      this.endDate = dateArr && dateArr[1];
      dateArr.radioValue = this.radioValue
      this.$emit("change", dateArr);
    },
  }
};
</script>
<style scoped lang="scss">
.top{
  background: #fff;
  box-sizing: border-box;
  // margin-bottom: 6px;
  // border-radius: 10px;
}
</style>
